<!-- 用户个人中心页面 -->
<template>
    <div>
        <el-row>
            <el-col :span="4">
                <el-button type="primary" class="el-icon-arrow-left" @click="goHome">返回上一级</el-button>
            </el-col>
        </el-row>
        <hr />

        <div class="user-box">
            <el-button type="text" @click="dialogFormVisible = true">
                <!-- <el-avatar class="user-icon" shape="square" size="large" :src="userPic" /> -->
                <img  class="user-icon"  :src="userPic" alt="">
                    </el-button>
            <h2 class="user-name">{{ userName }}</h2>
            <el-button class="user-btn" @click="logOut">退出登录</el-button>
        </div>

        <!-- 修改头像弹窗 -->
        <el-dialog title="修改头像" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="图片URL" :label-width="formLabelWidth">
                    <el-input v-model="newPic" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="changePic">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 用户名
            userName: this.$store.state.user.username,
            // 用户头像URL
            userPic:JSON.parse(sessionStorage.getItem("user")).picUrl[0] || "https://img.wxcha.com/m00/12/db/594dd9fb43029a58df9acc0e4591d94b.jpg?down",
            // 修改后的头像URL
            newPic: "",
            // 弹窗状态
            dialogFormVisible: false,
            formLabelWidth: "100px"
        }
    },
    methods: {
        // 返回上一级按钮功能
        goHome() {
            this.$router.push("/home")
        },

        // 退出登录按钮功能
        logOut() {
            this.$store.commit('EXITLOGIN')
            this.$router.push("/login")
        },

        // 获取用户头像
        getUserPic() {
            this.$store.state.user.picUrl[0] && (this.userPic = this.$store.state.user.picUrl[0])
        },
        
        // 修改用户头像
        async changePic() {
            if (this.newPic.length > 0) {
                let res = await this.$http({
                    method: "GET",
                    url: `http://10.3.136.136:8888/changePic?username=${this.$store.state.user.username}&picUrl=${this.newPic}`,
                })
                if (res.status.code == 200) {
                    this.$message({
                        message: "修改成功",
                        type: 'success'
                    });
                this.$store.commit('CHANGEPIC', this.newPic)
                this.dialogFormVisible = false
                this.userPic = this.newPic
                this.newPic = ""
                } else {
                    this.$message.error('操作失败');
                }
            
            } else {
                this.$message.error('未输入URL');
            }
        },
        closeDialog() {
            this.dialogFormVisible = false
            this.newPic = ""
        }
    },

    mounted() {
        this.getUserPic()
    }
}
</script>

<style lang="scss" scoped>
.el-icon-arrow-left {
    margin: 1vw;
}

.user-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40vw;
    height: 40vw;
    display: flex;
    flex-direction: column;
    align-items: center
}

.user-icon {
    width: 20vw;
    height: 20vw;
    margin: 5vw;
    margin-bottom: 0;
}

.user-name {
    margin: 1vw;
}
</style>